@import 'custom';

@editView: edit-view;
.@{editView}-wrapper {
  color: fade(@text-color-light, 45);
  position: relative;
  .@{editView} {
    padding: 1px 0; // 切换时用
    &.tween-one-leaving {
      position: absolute;
      width: 100%;
      top: 0;
    }

    &-func, &-module-wrapper {
      &:first-child {
        h1 {
          margin-top: 0;
        }
      }
    }

    &-module-wrapper {
      &:last-child {
        margin-bottom: 40px;
      }
      &.children-wrapper {
        width: 100%;
        margin-bottom: 10px;
        > h3 {
          margin-top: 0;
          > span {
            font-size: 12px;
          }
        }
        &:last-child, & li:last-child {
          margin-bottom: 0;
        }
      }
    }
    h1, h2, h3 {
      color: @text-color-light;
      position: relative;
      font-weight: normal;
    }
    h1 {
      font-size: 18px;
      line-height: 40px;
      background: fade(@edit-line-color, 30);
      border-top: 1px solid @edit-line-color;
      width: 104%;
      margin-left: -2%;
      padding-left: 2%;
      margin-bottom: 20px;
      margin-top: 20px;
      span {
        font-size: 12px;
        color: fade(@text-color-light, 35);
        margin-left: 10px;
      }
    }
    h2 {
      font-size: 14px;
      line-height: 32px;
      border-top: 1px solid @edit-line-color;
      width: 104%;
      margin-left: -2%;
      padding-left: 2%;
      background: fade(@edit-line-color, 15);
    }
    h3 {
      font-size: 14px;
      margin: 10px auto;
      span {
        background: @edit-bar-color;
        position: relative;
        z-index: 1;
        padding-right: 15px;
      }
      &:after {
        content: '';
        display: block;
        height: 1px;
        background: @edit-line-color;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        margin: auto;
      }
    }
    ul li, &-func > div {
      margin: 10px auto;
      > span {
        width: 28%;
        vertical-align: top;
        height: 22px;
        line-height: 22px;
        display: inline-block;
        & i {
          margin-left: 5px;
          color: fade(@text-color-light, 75);
        }
      }
      > div {
        width: 72%;
        padding-left: 10px;
        display: inline-block;
        position: relative;
      }
      &.ant-pagination-item {
        margin-right: 8px;
      }
      &.ant-pagination-prev, &.ant-pagination-next {
        display: none;
      }
    }

  }

  .button-wrapper {
    padding-left: calc(~"35% + 10px");
    padding-top: 15px;
    border-top: 1px solid @edit-line-color;
    margin-bottom: 15px;
  }
  .ant-select {
    width: 100%;
    &-selection {
      background: transparent !important;
      color: fade(@text-color-light, 55);
      border-color: @line-deep-color;
    }
    &-arrow{
      color: @line-deep-color;
    }
    &.small {
      width: 50%;
    }
  }
  .input-group-max {
    width: 100%;
    > * {
      width: 50%;
      display: inline-block;
    }
    .input-group-max-number {
      width: 70%;
    }
    .input-group-max-select {
      width: 30%;
    }
    .input-group-min-number {
      width: 45%;
    }
    .input-group-min-select {
      width: 55%;
    }
    .input-group-min {
      width: calc(~"50% - 3px");
      margin: 0 6px 6px 0;
      &:nth-child(2n) {
        margin-right: 0;
      }
      &:nth-child(n+3) {
        margin-bottom: 0;
      }
    }
    .one-input {
      border-radius: 4px !important;
      border-right-width: 1px;
      width: calc(~"50% - 3px");
      margin: 0 6px 6px 0;
      &:nth-child(2n) {
        margin-right: 0;
      }
      &:nth-child(n+3) {
        margin-bottom: 0;
      }
      &:last-child {
        border-radius: 4px;
      }
    }
  }

  ul li.ant-select-search {
    margin: auto;
    .ant-select-search__field__wrap {
      padding-left: 0;
    }
  }
  .ant-input {
    background: transparent !important;
    color: fade(@text-color-light, 55);
    border-color: @line-deep-color;
  }
  .ant-input-number, .ant-input-number input, .ant-input-number-handler-wrap {
    background: transparent !important;
    color: fade(@text-color-light, 55);
    border-color: @line-deep-color;
    .ant-input-number-handler {
      .ant-input-number-handler-up-inner, .ant-input-number-handler-down-inner {
        color: fade(@text-color-light, 55);
      }
    }
  }
}

.@{editView}-color-wrapper {
  position: absolute;
  right: 16px;
  z-index: 100;
  outline: 0;
}

.@{editView}-color {
  transform-origin: top;
}
